<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form :inline="true" :model="appQuery" @submit.prevent="appSearch" @keyup.enter="appSearch">
            <el-form-item label="关键字">
              <el-input v-model="appQuery.keyword" placeholder="关键字" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="appQuery.isOpen" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in [
                    { label: '全部', value: '' },
                    { label: '上线', value: 'true' },
                    { label: '下线', value: 'false' },
                  ]"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="search" @click="appSearch">搜索</el-button>
              <el-button icon="refresh" @click="appReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="appHandleAdd()">弹窗添加</el-button>
          <el-button type="primary" plain icon="plus" @click="$router.push(`${$route.path}/add`)">页面添加</el-button>
          <!-- v-hasPermi="['system:post:export']" -->
          <el-button type="warning" plain icon="download" @click="appHandleExport()">导出</el-button>
        </div>
      </template>

      <!-- <el-row>
        <el-col :span="24">
          <el-radio-group v-model="appQuery.appType" >
            <el-radio-button :label="item.value" v-for="(item, index) in appTypeList" :key="index" @change="this.appSearch">{{ item.label }}</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>-->

      <el-table v-loading="appLoading" :data="appList" style="width: 100%" @selection-change="appHandleSelectionChange">
        <el-table-column type="selection" align="left" />
        <el-table-column label="标题" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="类型" show-overflow-tooltip>
          <template #default="scope">
            <template v-if="scope.row.type == 0">文章</template>
            <template v-else-if="scope.row.type == 1">视频</template>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch :before-change="() => appHandleUpdate(scope.row, { isOpen: !scope.row.isOpen }, !isOpen ? '确认上线？' : '确认下线？', '已修改')" v-model="scope.row.isOpen"></el-switch>
            <!-- <el-switch :before-change="() => appHandleUpdate(scope.row, { state: scope.row.state == 1 ? 2 : 1 }, '确认修改吗', '已修改')" :active-value="1" :inactive-value="2" v-model="scope.row.state"> </el-switch> -->
          </template>
        </el-table-column>
        <el-table-column prop="stateDesc" label="状态"></el-table-column>
        <el-table-column label="审核" show-overflow-tooltip>
          <template #default="scope">
            <template v-if="scope.row.auditState == 0">待审核</template>
            <template v-if="scope.row.auditState == 1">审核通过</template>
            <template v-else-if="scope.row.auditState == 2">审核不通过</template>
          </template>
        </el-table-column>
        <el-table-column label="状态操作">
          <template #default="scope">
            <el-button link type="primary" @click="handleShowAudit(scope.row)">审核</el-button>
            <el-button link type="primary" @click="appHandleUpdate(scope.row, { state: 1 }, '确认上线?')">上线</el-button>
            <el-button link type="primary" @click="appHandleUpdate(scope.row, { state: 2 }, '确认下线?')">下线</el-button>
          </template>
        </el-table-column>
        <el-table-column label="页面操作">
          <template #default="scope">
            <el-button link type="primary" icon="edit" @click="$router.push(`${$route.path}/${scope.row[appId]}/edit`)">页面编辑</el-button>
            <el-button link type="primary" icon="document" @click="$router.push(`${$route.path}/${scope.row[appId]}`)">页面详情</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">弹窗编辑</el-button>
            <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)">物理删除</el-button>
            <el-button link type="primary" icon="delete" @click="appHandleUpdate(scope.row, { isDelete: true })">逻辑删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar">
        <el-button type="danger" plain :disabled="!appSelectd" icon="delete" @click="appHandleBatchDelete">删除</el-button>
        <el-button plain :disabled="!appSelectd" icon="document-checked" @click="appHandleBatchUpdate({ state: 1 }, '确认批量上线?')">上线</el-button>
        <el-button plain :disabled="!appSelectd" icon="document-delete" @click="appHandleBatchUpdate({ state: 2 }, '确认批量下线?')">下线</el-button>
      </div>
      <el-pagination @size-change="appHandleSizeChange" @current-change="appHandlePageChange" :current-page="appPage" :page-size="appPageSize" layout="total, sizes, prev, pager, next, jumper" :total="appTotal"></el-pagination>
    </template>

    <!-- 弹窗新增/编辑内容 -->
    <app-dialog-edit width="500px" v-model="appShowDetail" v-model:detail="appDetail" :json="formJson" @change="appInit" />

    <!-- 审核 -->
    <el-dialog title="订单审核" v-model="showAudit" width="500px">
      <el-form ref="dialogForm" :model="dialogData">
        <el-form-item label="审核结果" prop="auditState" :rules="[{ required: true, message: '请选择审核结果', trigger: 'blur' }]">
          <el-select v-model="dialogData.auditState" style="width: 100%">
            <el-option
              v-for="(item, index) in [
                { label: '通过', value: 1 },
                { label: '驳回', value: 2 },
              ]"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogData.auditState == 0" label="驳回原因" prop="auditState" :rules="[{ required: true, message: '请选择审核结果', trigger: 'blur' }]">
          <el-input type="textarea" rows="4" v-model="dialogData.auditRemark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAudit = false">取 消</el-button>
          <el-button type="primary" @click="handleAuditSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </app-page>
</template>

<script>
import { mapState } from 'vuex'
import { mixins } from 'jax-node'
import DemoEdit from './components/DemoEdit.vue'

export default {
  mixins: [mixins.pageList],
  components: {
    DemoEdit,
  },
  data() {
    return {
      // 默认查询参数
      appQury: {},

      typeList: [],

      showAudit: false,
      dialogData: {},
    }
  },
  computed: {
    ...mapState('app', [
      'userInfo', // 用户信息
      'dict', // 字典
    ]),
    // 应用列表
    appTypeList() {
      return this.dict?.appType || []
    },
    formJson() {
      const fixed = false
      const required = true
      const miniInput = { style: 'width:100px' }

      // inputAttr: {
      //   'active-value': 1,
      //   'inactive-value': 2,
      // },

      return [
        { name: 'rank', label: '序号', type: 'number', tips: '（序号越小越靠前）', inputAttr: miniInput },
        { name: 'title', label: '标题', required },
        { name: 'desc', label: '描述', type: 'textarea' },
        { name: 'isOpen', label: '状态', type: 'switch' },
        { name: 'categoryId', label: '分类', type: 'select', options: this.typeList },
        { name: 'cover', label: '封面图', type: 'upload-image' },
        { name: 'images', label: '图片列表', type: 'upload-images' },
      ]
    },
  },
  created() {
    this.getTypeTree()
  },
  methods: {
    getTypeTree() {
      this.$http(`/demo/category`, {
        params: {
          isOpen: true,
        },
      }).then((res) => {
        this.typeList = res.map((item) => {
          let prefix = ''
          if (item.index > 1) {
            prefix = '├' + '─'.repeat((item.index - 1) * 1)
          }
          return {
            ...item,
            label: prefix + item.categoryName,
            value: item.categoryId || item.id,
            index: item.index,
          }
        })
      })
    },
    // 显示审核界面
    handleShowAudit(item) {
      this.showAudit = true
      this.dialogData = {
        docId: item.id,
      }
    },

    // 审核订单
    handleAuditSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.$http.put(`${this.appApi}/${this.dialogData.docId}`, this.dialogData).then((res) => {
            this.showAudit = false
            this.appInit()
          })
          // this.$http.post('/program/audit', this.dialogData).then((res) => {
          //   this.showAudit = false
          //   this.appInit()
          // })
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
